<template>
    <div class="meLayout" ref="meLayoutRef">
        <template v-for="(item,index) in props.totalList" :key="item.id">
            <a  :href="item.url" target="_blak" v-if="isShow(index)">
                <span >{{ item.index_title }}</span>
                <span   v-if="item.badges" 
                        :style="{ 'color':item.badges[0].text_color,'background-color':item.badges[0].border_color }"
                >{{ item.badges[0].text }}</span>
            </a>
        </template>
        <template v-if="containNum < props.totalList.length">
            <a :href="props.totalList[0].url" target="_blak"><span class="moreFill"><el-icon><MoreFilled /></el-icon></span></a>
            <a :href="props.totalList[props.totalList.length - 1].url" target="_blak">
                <span>{{ props.totalList.length }}</span>
                <span   v-if="props.totalList[props.totalList.length - 1].badges"
                        :style="{ 'color':props.totalList[props.totalList.length - 1].badges[0].text_color,'background-color':props.totalList[props.totalList.length - 1].badges[0].border_color }"
                >{{ props.totalList[props.totalList.length - 1].badges[0].text }}</span>
            </a>
        </template>

    </div> 
</template>

<script lang="ts" setup>
import { computed,ref,onMounted,onBeforeUnmount } from "vue"
interface itemx{
    badges:[{
        text:string     //盒子上的文字
        text_color:string   //标签上字体颜色
        border_color:string
        border_color_night:string
        text_color_night:string
    }]
    id:number
    index_title:string
    cover:string
    log_title:string
    title:string
    url:string
}
interface Props{
    width:number
    totalList:Array<itemx>
}
const props = defineProps<Props>()
const meLayoutRef = ref()
let containNum = ref<number>(0) //当前容器容纳的盒子数量

onMounted(() => {
    containNum.value = Math.floor(meLayoutRef.value.clientWidth / props.width)
})
function getClientWidth(){
    containNum.value = Math.floor(meLayoutRef.value.clientWidth / props.width)
}
window.addEventListener('resize',getClientWidth)

const isShow = computed(() => (val:number) => {
    if (meLayoutRef.value && containNum.value >= val + 3 ) {
        return true
    }
    return false
})
onBeforeUnmount(() => {
    window.removeEventListener('resize',getClientWidth)
})
</script>

<style lang="scss" scoped>
.meLayout{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    & a{
        flex-shrink: 0;
        border: 1px solid #E3E5E7;
        border-radius: 8px;
        color: #18191C;
        width: 37px;
        height: 100%;
        @include flexRowCenter;
        position: relative;
    }
    & a span:nth-child(2){
        position: absolute;
        border: 1px solid;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        padding: 0 2px;
        right: -4px;
        scale: 0.9;
        top: -10px;
        @include flexRowCenter;
    }
    & a:hover{
        background: #E3E5E7;
    }
}
</style>